<template>
	<div class="app-container flex col-top row-between">
		<div class="bgWhite radius8" style="width: 280px;padding: 20px;">
			<div>
				<span class="main-color">产品类别</span>
			</div>
			<div class="mt15">
				<el-tree :data="data" node-key="id" default-expand-all :expand-on-click-node="false"
					@node-click="handleNodeClick" :highlight-current="true">
					<template #default="{ node, data }">
						<div class="custom-tree-node flex col-center row-between">
							<span>{{ node.label }}</span>
						</div>
					</template>
				</el-tree>
			</div>
		</div>
		<div style="width: calc(100% - 300px);">
			<div class="bgWhite radius8">
				<el-form class="p20 flex col-top row-between" style="padding-bottom: 0;" label-width="80px"
					:model="queryParams" ref="queryForm" :inline="true">
					<div>
						<el-form-item label="销售渠道" prop="salesChannel">
							<el-select v-model="queryParams.salesChannel" placeholder="请选择" size="large"
								style="width: 200px">
								<el-option v-for="dict in bus_channel" :key="dict.value" :label="dict.label"
									:value="dict.value" />
							</el-select>
						</el-form-item>
						<el-form-item label="商品名称" prop="commodityName">
							<el-input v-model="queryParams.commodityName" placeholder="请输入" class="resetInput"
								style="width: 200px"/>
						</el-form-item>
					</div>
					<el-form-item style="margin-right: 0">
						<div class="flex col-center row-end">
							<el-button class="searchBtn" type="defaultBtn" @click="handleQuery">查询</el-button>
							<el-button class="searchBtn" icon="Refresh" @click="resetQuery">重置</el-button>
						</div>
					</el-form-item>
				</el-form>
			</div>
			<div class="bgWhite radius8 p20 mt25">
				<div class="flex col-center row-between mb20">
					<span class="fb fs16">库存列表</span>
					<div>
						<el-button type="defaultBtn" @click="handleUpdate"
						v-hasPermi="['update:inventory']"
						>更新库存
						</el-button>
					</div>
				</div>
				<el-table v-loading="loading" :data="list" style="width: 100%" :header-row-style="{
					background: '#FAFAFA',
					color: '#0C1019',
					height: '54px',
				  }" :cell-style="{ height: '54px' }">
					<el-table-column label="主键" align="center" prop="id" v-if="false" />

					<el-table-column label="商品图片" align="center" prop="mainImageUrl" width="120">
						<template #default="scope">
							<img :src="scope.row.mainImageUrl ? scope.row.mainImageUrl : defaultImg" class="radius8" style="width: 80px; height: 80px" />
						</template>
					</el-table-column>
					<el-table-column label="商品名称" align="center">
						<template #default="scope">
							<span class="main-color cursor" @click="handleDetail(scope.row)">{{scope.row.commodityName}}</span>
						</template>
					</el-table-column>
					<el-table-column label="关联产品" align="center" prop="productName" width="150" />
					<el-table-column label="最小单位" align="center" prop="minUnit">
						<template #default="scope">
							
						</template>	
					</el-table-column>
					<el-table-column label="整件数量" align="center" prop="caseQuantity" />

					<el-table-column label="销售渠道" align="center" prop="salesChannel">
						<template v-slot="scope">
							<dict-tag :options="bus_channel" :value="scope.row.salesChannel" />
						</template>
					</el-table-column>
					<el-table-column label="库存数量" align="center" prop="status">
						<template v-slot="scope">
							{{scope.row.inventory}}
						</template>
					</el-table-column>
					<el-table-column label="更新时间" align="center" prop="updateTime" width="200" />
				</el-table>

				<pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNum"
					v-model:limit="queryParams.pageSize" @pagination="getList" />
			</div>
		</div>
		<operateGoods ref="goodsPop"></operateGoods>
	</div>
</template>

<script setup name="ProductSetup">
	import {
		listClassify, //商品分类树
		addTree1,//商品分类树新增
		delTree1,//商品分类树删除
	} from "@/api/business/product";
	import {
		findInventory,//库存
		refreshInventory//更新库存
	} from "@/api/business/tool"
	import {
		Search
	} from '@element-plus/icons-vue'

	const {
		proxy
	} = getCurrentInstance();
	const {
		bus_channel,//销售渠道
		bus_toxicity,
		bus_sosage_form,
		bus_product_category,
		bus_active_ingredient_content
	} = proxy.useDict(
		"bus_channel",
		"bus_toxicity", "bus_sosage_form", "bus_product_category", "bus_active_ingredient_content");
</script>
<script>
	import operateGoods from "@/views/business/goods/components/operateGoods.vue";
	export default {
		components:{
			operateGoods
		},
		data() {
			return {
				loading: true, // 遮罩层
				total: 0, // 总条数
				list: [], // 产品表格数据
				queryParams: {
					pageNum: 1,
					pageSize: 10,
					commodityName: '', // 产品名称 品牌名称 产品编码
					classifyId:'',
					salesChannel: '', // 销售渠道
				}, //查询参数
				data: [],//分类树数据
			}
		},
		created() {
			this.getTree(1)
		},
		methods: {
			
			//分类树
			getTree(num) {
				listClassify().then(res => {
					if (res.code == 200) {
						let arr = [{
							ancestors:'',
							id:'-1',
							name:'全部',
							parentId:''
						}]
						let dataArr = arr.concat(res.data)
						for (let key in dataArr) {
							dataArr[key].label = dataArr[key].name
						}
						this.data = this.handleTree(dataArr)
						if(num == 1){
							this.getList()
						}
					}
				})
			},
			// 点击左侧分类树
			handleNodeClick(e){
				if(e.id*1 != -1){
					this.queryParams.classifyId = e.id	
			    }else{
					this.queryParams.classifyId = ''
				}				
				this.getList();
			},
			//查询商品列表
			getList() {
				this.loading = true;
				findInventory(this.queryParams).then((response) => {
					this.list = response.rows;
					for(let key in this.list){
						this.list[key].status = this.list[key].status == '0' ? true : false
					}
					this.total = response.total;
					this.loading = false;
				});
			},
			// 产品详情
			handleDetail(row){
				this.$refs.goodsPop.open(row.commodityId,1)
			},
			/** 搜索按钮操作 */
			handleQuery() {
				this.queryParams.pageNum = 1;
				this.getList();
			},
			/** 重置按钮操作 */
			resetQuery() {
				this.resetForm("queryForm");
				this.handleQuery();
			},
			// 更新库存
			handleUpdate(){
				refreshInventory().then(res=>{
					if(res.code == 200){
						this.$modal.msgSuccess('已更新')
						this.getList()
					}
				})
			},
		}
	}
</script>
<style>
	.custom-tree-node{
		flex: 1;
	}
	.el-tree-node{
		margin: 6px 0;
	}
</style>